<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
指令和计算属性综合案例
v-model 双向绑定 以及 .trim 和 .number 修饰符
v-bind 绑定属性
v-for 循环遍历 :key 唯一标识标签
v-on 绑定事件 .prevent 阻止默认事件 修饰符
v-if 展示或销毁
v-show 显示或隐藏
-->
<style>
    .fonts {
        color: red;
    }
</style>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-if="scores.length > 0">
                <tr v-for="(item,index) in scores" :key="item.id">
                    <td>{{ index+1}}</td>
                    <td>{{item.name}}</td>
                    <td v-bind:class="{fonts:item.score>60}" v-bind:style="{fontSize:f(item.score)}">
                        </v-bind:style>{{item.score}}</td>
                    <td><a href="" v-on:click.prevent="dele(item.id)">删除</a></td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="5">暂无数据</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">总分：{{ sumScore }} 平均分：{{ averageScore }}</td>
                </tr>
            </tfoot>
        </table>
        <div>
            <label>科目：</label>
            <input type="text" v-model.trim="kemu">
            <label>分数:</label>
            <input type="text" v-model.number="sc">
            <button v-on:click="sub">提交</button>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                scores: [{ id: 1, name: '语文', score: 34 },
                { id: 2, name: '数学', score: 98 },
                { id: 3, name: '英语', score: 23 }
                ],
                kemu: '',
                sc: ''
            },
            methods: {
                sub() {
                    if (this.kemu != '' && this.sc != '') {
                        this.scores.push({ id: +new Date(), name: this.kemu, score: this.sc })
                        this.kemu = ''
                        this.sc = ''
                    }

                },
                dele(id) {
                    this.scores = this.scores.filter(item => item.id != id)
                },
                f(score) {
                    return score > 60 ? '20px' : '10px'
                }
            },
            computed: {
                sumScore() {
                    return this.scores.reduce((sum, item) => sum + item.score, 0)
                },
                averageScore() {
                    if(this.scores.length == 0) {
                        return 0
                    }
                    return (this.sumScore / this.scores.length).toFixed(2)
                }
            }
        })
    </script>

</body>

</html>